<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./template/user.xhtml"
                xmlns:p="http://primefaces.org/ui"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">

    <ui:define name="header"/>

    <ui:define name="context">

        <p:growl id="messages" showDetail="true"/>  

        <p:dataGrid  id="Table" var="a" value="#{u_memberManagedBean.member.albumList}" paginator="true" 
                     rows="3" columns="3"
                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} 
                     {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">

            <p:panel header="#{a.name}" style="text-align:center">
                <h:panelGrid columns="1" style="width:100%; text-align: center">  

                    <p:commandLink oncomplete="Images.show();" update=":form:dlgImages">
                        <h:graphicImage library="user/images/album" 
                                        name="#{a_albumManagedBean.getAvatar(a)}" 
                                        width="100" height="100"/> 

                        <f:setPropertyActionListener value="${a.imagesList}" 
                                                     target="#{u_albumManagedBean.lstImage}"/>
                    </p:commandLink>

                    <p:outputLabel value="#{a.imagesList.size()} image(s)"/>
                </h:panelGrid>  
            </p:panel>

        </p:dataGrid >

        <p:dialog id="dlgImages" header="Images" widgetVar="Images" modal="true" resizable="false" 
                  position="400,100">  

            <p:galleria value="#{u_albumManagedBean.lstImage}" var="image" panelWidth="500" panelHeight="313" 
                        showCaption="true" autoPlay="false" style="width:100%; text-align: center">
                <h:graphicImage library="user/images/album/" name="${image.images}" height="240" width="375"
                                alt="Image Description for #{image.images}" title="${image.images}"/>
            </p:galleria>  

        </p:dialog>
    </ui:define>

</ui:composition>
